<section class="demo-section">
  <d-toast [value]="msgs"></d-toast>
  <div>
    <form dForm ngForm [dValidateRules]="formRules.rule" [layout]="layoutDirection" #userForm="dValidateRules" (dSubmit)="submitForm()">
      <d-form-item>
        <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'Enter a user name you like'">UserName</d-form-label>
        <d-form-control>
          <input
            dTextInput
            autocomplete="off"
            name="username"
            placeholder="Enter a user name"
            [(ngModel)]="formData.userName"
            [dValidateRules]="formRules.usernameRules"
          />
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label [required]="true">Sub User Group</d-form-label>
        <d-form-control>
          <d-child-form-group [userGroupData]="formData.userGroup"></d-child-form-group>
        </d-form-control>
      </d-form-item>
      <d-form-operation>
        <d-button class="mr-element-spacing" [title]="userForm.errorMessage || ''" circled="true" style="margin-right: 8px" dFormSubmit
          >Submit</d-button
        >
        <d-button bsStyle="common" circled="true" dFormReset>Reset</d-button>
      </d-form-operation>
    </form>
  </div>
</section>
